/**
* @Author: 李晨光
* @Date: 2019/12/16
* @Version: 1.0
* @Last Modified by: 李晨光
* @Last Modified time: 2019/12/16
**/
<comment>
  # 生成整改单
</comment>
<template>
  <div id="IssueReportOrder" class="p-box">
    <div class="p-return">
      <mu-appbar color="primary" class="lan-header">
        <mu-button icon slot="left" v-close>
          <i class="iconfont angle-left iconangle-left"></i>
          <span class="lan-header-back">返回</span>
        </mu-button>生成整改单
      </mu-appbar>
    </div>
    <div style="height:calc(100vh - .45rem);overflow: auto;background: #fff;" class="history">
      <mu-container ref="container" class="lan-loadmore-content no-padding">
        <mu-form
          :model="form"
          class="mu-lan-form"
          :label-position="'left'"
          label-width
          style="margin-top: 1px;"
        >
          <mu-form-item label="项目名称" class="form-between required">
            <span class="normal-font-size form-right-text">{{form.orgName ? form.orgName : '请选择'}}</span>
          </mu-form-item>
          <mu-form-item label="所属区域" class="form-between required">
            <span class="normal-font-size form-right-text">{{form.areaName ? form.areaName : '请选择'}}</span>
          </mu-form-item>
          <mu-form-item label="质量问题描述" class="inline-item required">
            <mu-text-field
              v-model="form.problemDescription"
              disabled
              multi-line
              placeholder="请输入"
              :rows="4"
              :rows-max="8"
            ></mu-text-field>
          </mu-form-item>
          <mu-form-item label="问题部位" class="inline-item required">
            <mu-text-field
              v-model="form.problemPart"
              disabled
              multi-line
              placeholder="请输入"
              :rows="4"
              :rows-max="8"
            ></mu-text-field>
          </mu-form-item>
          <mu-form-item label="现场照片" class="inline-item required">
            <div class="ly_flex ly_flex_wrap_wrap">
              <div
                style="position: relative;width: .7rem;height: .7rem;margin-right: .095rem;margin-bottom: .08rem;border-radius:0.02rem;background:rgba(216,216,216,1);overflow: hidden"
                v-for="(url, index) in handurl(form.scenePhotos)" :key="index">
              >
                <img
                  :src="url"
                  style="transform: scale(1.5)"
                  @click="open('imgPreview',{url: url})"
                  alt
                />
                <!-- <i
                  class="iconfont iconqingchu"
                  @click.stop="delImg(form, url)"
                  style="color: #FF4242;position: absolute;right: .05rem; top: 0;"
                ></i> -->
              </div>
              <div style="margin: 0 .1rem .14rem 0;" v-if="false">
                <FileUpload @successed="confirm('imgUpload',{res: $event, form})" v-if="handurl(form.scenePhotos).length < 5" ></FileUpload>
              </div>
            </div>

            <!-- <mt-switch v-model="form.useTable"></mt-switch> -->
          </mu-form-item>
          <mu-form-item label="备注" class="inline-item">
            <mu-text-field
              v-model="form.remark"
              disabled
              multi-line
              placeholder="请输入"
              :rows="4"
              :rows-max="8"
            ></mu-text-field>
          </mu-form-item>
          <mu-form-item label="责任单位" class="form-between required">
            <span
              class="normal-font-size form-right-text"
              @click="open('org', {form})"
            >{{form.responsibleUnitName ? form.responsibleUnitName : '请选择'}}</span>
            <i class="iconfont angle-left iconangle-right"></i>
          </mu-form-item>
          <mu-form-item label="问题类型" class="form-between required">
            <span class="normal-font-size form-right-text" @click="typeCon = true">{{form.problemTypeId?typeName:'请选择'}}</span>
            <i v-if="form.problemTypeId && form.problemTypeId != -1" class="iconfont iconwenhao" @click="openTips"></i>
            <i v-if="!form.problemTypeId || form.problemTypeId == -1" class="iconfont angle-left iconangle-right"></i>
            <!-- <mu-select
              v-model="form.problemTypeId"
              placeholder="请选择"
              @change="problemTypeChange"
              popover-class="lan-popover-select"
            >
              <mu-option label="其他" value="0"></mu-option>
              <mu-option
                v-for="(list,index) in problemTypes"
                :key="index"
                :label="list.problemTypeId"
                :value="list.id"
              ></mu-option>
            </mu-select>
            <i class="iconfont angle-left iconangle-right"></i> -->
          </mu-form-item>
          <mu-form-item
            label="问题备注"
            class="form-between required inline-item"
            v-if="form.problemTypeId=='-1'"
          >
            <mu-text-field
              v-model="form.problemElseRemark"
              multi-line
              placeholder="请输入"
              :rows="4"
              :rows-max="8"
            ></mu-text-field>
          </mu-form-item>
          <mu-form-item label="问题等级" class="form-between required">
            <mu-flex class="select-control-row">
              <mu-radio
                style="margin-right: 10px"
                :key="level.value"
                v-for="level in problemLevels"
                :value="level.value"
                v-model="form.problemLevel"
                :label="level.label"
              ></mu-radio>
            </mu-flex>
          </mu-form-item>
          <mu-form-item label="问题描述" class="inline-item required">
            <mu-text-field
              v-model="problemDescription"
              multi-line
              placeholder="请输入"
              :rows="4"
              :rows-max="8"
            ></mu-text-field>
          </mu-form-item>
          <mu-form-item label="平面图标记" class="inline-item required">
            <MapShow :single="true" enableClick :width="'100%'" :url="form.photoUrl" v-model="form.points"></MapShow>
          </mu-form-item>
          <mu-form-item label="整改期限" class="required">
            <!--<mu-date-input
              v-model="form.days"
              placeholder="请选择"
              container="bottomSheet"
              value-format="YYYY-MM-DD"
            ></mu-date-input>-->
            <mu-select v-model="form.days" placeholder="请选择" popover-class="lan-popover-select">
              <mu-option
                v-for="(list,index) in daysList"
                :key="index"
                :label="list.name"
                :value="list.id"
              ></mu-option>
            </mu-select>
            <i class="iconfont angle-left iconangle-right"></i>
          </mu-form-item>
          <mu-form-item label="整改要求" class="inline-item required">
            <mu-text-field
              v-model="form.rectificationRequirements"
              multi-line
              placeholder="请输入"
              :rows="4"
              :rows-max="8"
            ></mu-text-field>
          </mu-form-item>
          <mu-form-item label="整改责任人" class="inline-item required">
            <div class="userBox" style v-for="(user, index) in form.responsibleUsers" :key="index">
              <div
                class="ly_flex ly_flex_just_center ly_flex_ali_center add"
              >{{user.label.substr(0,1)}}</div>
              <span>{{user.label}}</span>
              <i
                class="iconfont iconqingchu"
                @click.stop="delUser('responsibleUser',form, user.value)"
                style="color: #FF4242;position: absolute;right: .05rem; top: 0;"
              ></i>
            </div>
            <div style @click="open('user', {form, type: 'responsibleUser'})">
              <div class="userTrigger" @click="sheetVisible = true">
                <div class="ly_flex ly_flex_just_center ly_flex_ali_center add">
                  <i class="iconfont iconplus"></i>
                </div>
                <span>添加人员</span>
              </div>
            </div>
          </mu-form-item>

          <mu-form-item label="复查人" class="inline-item required">
            <div class="userBox" v-for="(user, index) in form.reviewUsers" :key="index">
              <div
                class="ly_flex ly_flex_just_center ly_flex_ali_center add"
              >{{user.label.substr(0,1)}}</div>
              <span>{{user.label}}</span>
              <i
                class="iconfont iconqingchu"
                @click.stop="delUser('reviewUser',form, user.value)"
                style="color: #FF4242;position: absolute;right: .05rem; top: 0;"
              ></i>
            </div>
            <div style @click="open('user', {form, type: 'reviewUser'})">
              <div class="userTrigger" @click="sheetVisible = true">
                <div class="ly_flex ly_flex_just_center ly_flex_ali_center add">
                  <i class="iconfont iconplus"></i>
                </div>
                <span>添加人员</span>
              </div>
            </div>
          </mu-form-item>
          <mu-form-item label="抄送人" class="inline-item">
            <div class="userBox" v-for="(user, index) in form.rectCopyUsers" :key="index">
              <div
                class="ly_flex ly_flex_just_center ly_flex_ali_center add"
              >{{user.label.substr(0,1)}}</div>
              <span>{{user.label}}</span>
              <i
                class="iconfont iconqingchu"
                @click.stop="delUser('rectCopyUser',form, user.value)"
                style="color: #FF4242;position: absolute;right: .05rem; top: 0;"
              ></i>
            </div>
            <div style @click="open('user', {form, type: 'rectCopyUser'})">
              <div class="userTrigger" @click="sheetVisible = true">
                <div class="ly_flex ly_flex_just_center ly_flex_ali_center add">
                  <i class="iconfont iconplus"></i>
                </div>
                <span>添加人员</span>
              </div>
            </div>
          </mu-form-item>
        </mu-form>
        <div style="padding:0 14px;">
          <mu-button full-width color="primary" style="margin:.2rem 0" @click="save">提交</mu-button>
        </div>
      </mu-container>
    </div>
    <!-- 选项目 -->
    <Org
      ref="org"
      v-if="org.open"
      :open="org.open"
      :orgType="org.orgType"
      @close="close('org')"
      v-model="org.res"
      @confirm="confirm('org')"
    ></Org>
    <!-- 选人 -->
    <User
      ref="User"
      v-if="user.open"
      :open="user.open"
      :multiple="user.multiple"
      :orgType="user.userType"
      @close="close('user')"
      v-model="user.res"
      @confirm="confirm('user')"
    ></User>
    <!--选择区域-->
    <SelectArea
      v-if="area.open"
      :open="area.open"
      v-model="area.res"
      :currentProject="area.currentProject"
      @close="close('area')"
      @confirm="confirm('area')"
    ></SelectArea>
    <!--图片预览-->
    <FilePreview :fileUrl="imgPreview.imgUrl" :open="imgPreview.open" @close="close('imgPreview')"></FilePreview>
    <!-- 选择问题类型 -->
    <Qes ref="Qes" v-if="typeCon"  :open="typeCon"  @close="typeCon=false" @confirm="typeCon=false" @change="typeChange"></Qes>
  </div>
</template>

<script>
import SelectArea from "@/select/area/Area.vue";
import Org from "@/select/org/Org.vue";
import User from "@/select/user/User.vue";
import FilePreview from "@/preview/FilePreview.vue";
import FileUpload from "@/fileUpload/FileUpload.vue";
import Qes from "@/quseType/Qes.vue"
import { MessageBox } from "mint-ui";
export default {
  name: "IssueReportOrder",
  components: {
    SelectArea,
    Org,
    User,
    FilePreview,
    FileUpload, 
    Qes,
    MessageBox
  },
  props: {},
  data() {
    return {
      api: {
        getIssuRepoDetailApi: "/safety/problemReport/detail", // 获取详情
        getProblemTypesApi: "/safety/problemItem/pageList", // 获取问题类型
        addIssueReportOrderApi: "/safety/star/approval/submitRect" // 问题上报
      },
      id: "",
      // 组织选择
      org: {
        open: false,
        orgType: "currContacts",
        res: []
      },
      // 人员选择
      user: {
        open: false,
        userType: "currOrgProject",
        res: [],
        type: "",
        multiple: true
      },
      // 图片预览
      imgPreview: {
        open: false,
        imgUrl: ""
      },
      // 区域选择
      area: {
        open: false,
        currentProject: {},
        res: {}
      },
      // 图片上传
      imgUpload: {
        open: false
      },
      // 整改问题类型
      problemTypes: [],
      // 整改问题等级
      problemLevels: [
        {
          label: "重大",
          value: "3"
        },
        {
          label: "较大",
          value: "2"
        },
        {
          label: "一般",
          value: "1"
        }
      ],
      form: {
        rectCopyUserIds: [], //抄送人列表
        responsibleUserId: "", //整改责任人
        reviewUser: "", //复查人
        problemTypeId: "", //问题类型id
        areaId: "", //区域id
        areaName: "",
        orgId: "", //项目id
        orgName: "",
        problemDescription: "", //问题描述
        problemPart: "", //问题部位
        remark: "", //备注
        scenePhotos: "" //现场照片
      },
      detail: {},
      daysList: [],
      problemDescription:'',
      typeCon:false,
      tyinfor:'',
      typeName:'',
      customRoot:[],
    };
  },
  computed: {},
  created() {
    this.daysList = [];
    for (let i = 1; i <= 30; i++) {
      this.daysList.push({
        name: i + "天",
        id: i
      });
    }
    this.id = this.$route.query.id;
    if (this.id) {
      this.getDetailData();
    }
    // this.getProblemTypes();
  },
  mounted() {},
  watch: {},
  methods: {
    typeChange(value){
      this.typeName = value.problemTypeId
      this.form.problemTypeId = value.id;
      this.tyinfor = value
      this.problemTypeChange(value.id)
    },
    // 获取随机测量详情
    getDetailData() {
      this.$openLoading();
      this.$A
        .Go("get", this.api.getIssuRepoDetailApi, {
          id: this.id
        })
        .then(response => {
          this.$closeLoading();
          Util.processRes(response, () => {
            this.customRoot.push({
              value:this.detail.orgId,
              label:this.detail.orgName,
              type:1,
            })
            this.detail = response.body;
            this.form = {
              areaId: this.detail.areaId, //区域id
              areaName: this.detail.areaName,
              orgId: this.detail.orgId,
              orgName: this.detail.orgName,
              photoUrl: this.detail.photoUrl,
              problemDescription: this.detail.problemDesc,
              problemPart: this.detail.problemPart,
              remark: this.detail.remark,
              scenePhotos: this.detail.scenePhotos,
              reportId: this.detail.reportId,
              rectificationRequirements: "",
              problemTypeId: "",
              problemLevel: "1",
              problemElseRemark: "",
              floorPlanTag: "",
              days: "",
              isCurrentRect: 1
            };
            this.getAreaMessage();
          });
          Util.processError(this, response);
        })
        .catch(err => {
          this.$closeLoading();
          console.log(err);
        });
    },
    getAreaMessage() {
      if (this.form.areaId) {
        this.$A
          .Go("get", "/safety/projectArea/detail", { id: this.form.areaId })
          .then(response => {
            Util.processRes(response, () => {
              this.form.responsibleUnitId = response.body.corpId;
              this.form.responsibleUnitName = response.body.corpName;
              this.$forceUpdate();
              console.log(this.form.responsibleUnitName);
            });
            Util.processError(this, response);
          })
          .catch(err => {
            console.log(err);
          });
      }
    },
    // 获取问题类型
    getProblemTypes() {
      let obj = {
        list: [{}],
        obj: {},
        pageNo: -1,
        pageSize: 10
      };
      this.$A
        .Go("post", this.api.getProblemTypesApi, obj)
        .then(response => {
          this.$closeLoading();
          Util.processRes(response, () => {
            this.problemTypes = response.body.rows;
          });
          Util.processError(this, response);
        })
        .catch(err => {
          this.$closeLoading();
          console.log(err);
        });
    },
    openTips(id){
          // let obj = this.problemTypeList.filter(o=>o.id == id)
          MessageBox({
            title: '问题规范标准',
            message: this.tyinfor['standard'],
            confirmButtonText: '知道了'
          })
      },
    //问题类型change事件
    problemTypeChange(val) {
      if (val == -1) {
        this.$set(this.form, "problemLevel", "1"); //问题等级
        this.$set(this.form, "days", ""); // 整改期限
      } else {
        this.$A
          .Go("get", "/safety/problemItem/detail", { id: val })
          .then(res => {
            if (res.code == 200) {
              this.$set(this.form, "problemLevel", res.body.problemLevel); //问题等级
              this.$set(this.form, "days", res.body.rectificationPeriod); // 整改期限
            } else {
            }
          });
      }
    },
    // 组件打开
    open(type, props = {}) {
      switch (type) {
        // 组织
        case "org":
          this.org.open = true;
          break;
        // 人员
        case "user":
          this.user.res = [];
          this.form = props.form;
          this.user.type = props.type;
          if (this.user.type == "reviewUser") {
            this.user.multiple = false;
            this.user.res = props.form.reviewUsers || [];
          } else if (this.user.type == "responsibleUser") {
            this.user.multiple = false;
            this.user.res = props.form.responsibleUsers || [];
          } else if (this.user.type == "rectCopyUser") {
            this.user.res = props.form.rectCopyUsers || [];
            this.user.multiple = true;
          }

          this.user.open = true;
          break;
        // 区域
        case "area":
          this.area.open = true;
          break;
        // 图片预览
        case "imgPreview":
          this.imgPreview.imgUrl = props.url;
          this.imgPreview.open = true;
          break;
        // 图片上传
        case "imgUpload":
          this.imgUpload.oen = true;
          break;
      }
    },
    // 组件弹窗关闭
    close(type, props = {}) {
      switch (type) {
        // 组织
        case "org":
          this.org.open = false;
          break;
        // 人员
        case "user":
          this.user.open = false;
          break;
        // 区域
        case "area":
          this.area.open = false;
          break;
        // 图片预览
        case "imgPreview":
          this.imgPreview.open = false;
          break;
        // 图片上传
        case "imgUpload":
          this.imgUpload.oen = false;
          break;
      }
    },
    // 结果确认
    confirm(type, props) {
      switch (type) {
        // 组织
        case "org":
          this.form.responsibleUnitId = this.org.res[0].value;
          this.form.responsibleUnitName = this.org.res[0].label;
          this.org.open = false;
          break;
        // 人员
        case "user":
          this.user.open = false;
          console.log(111)
          this.addUser(this.user.type);
          break;
        // 区域
        case "area":
          this.form.areaId = this.area.res.id;
          this.form.areaName = this.area.res.name;
          this.area.open = false;
          break;
        // 图片预览
        case "imgPreview":
          this.imgPreview.open = false;
          break;
        // 图片上传
        case "imgUpload":
          this.addImg(
            props.form,
            this.$A.baseUrl[0] +
              "/safety/system/download?fileUrl=" +
              props.res.body
          );
          this.imgUpload.oen = false;
          break;
      }
    },

    handurl(str) {
      if (!str) {
        return [];
      } else {
        return str.split(",");
      }
    },
    // 添加人员
    addUser(type) {
      let ids = [];
      this.user.res.forEach(u => {
        if (!ids.includes(u.value)) {
          ids.push(u.value);
        }
      });
      switch (type) {
        case "reviewUser":
          this.form.reviewUsers = this.user.res;
          this.form.reviewUser = ids.join(",");
          break;
        case "rectCopyUser":
          this.form.rectCopyUsers = this.user.res;
          this.form.rectCopyUserIds = ids;
          break;
        case "responsibleUser":
          this.form.responsibleUsers = this.user.res;
          this.form.responsibleUserId = ids.join(",");
          break;
      }
    },
    // 删除人员
    delUser(type, form, id) {
      let ids = [];
      switch (type) {
        // 复查人
        case "reviewUser":
          form.reviewUsers.splice(
            form.reviewUsers.findIndex(i => i.value == id),
            1
          );
          this.$forceUpdate();
          form.reviewUsers.forEach(u => {
            if (!ids.includes(u.value)) {
              ids.push(u.value);
            }
          });
          form.reviewUser = ids.join(",");
          break;
        // 抄送人
        case "rectCopyUser":
          form.rectCopyUsers.splice(
            form.rectCopyUsers.findIndex(i => i.value == id),
            1
          );
          this.$forceUpdate();
          form.rectCopyUsers.forEach(u => {
            if (!ids.includes(u.value)) {
              ids.push(u.value);
            }
          });
          form.rectCopyUserIds = ids;
          break;
        // 责任人
        case "responsibleUser":
          form.responsibleUsers.splice(
            form.responsibleUsers.findIndex(i => i.value == id),
            1
          );
          this.$forceUpdate();
          form.responsibleUsers.forEach(u => {
            if (!ids.includes(u.value)) {
              ids.push(u.value);
            }
          });
          form.responsibleUserId = ids.join(",");
          break;
      }
    },
    // 添加照片
    addImg(form, url) {
      let arr = this.handurl(form.scenePhotos);
      arr.push(url);
      form.scenePhotos = arr.join(",");
    },
    // 删除照片
    delImg(form, url) {
      let arr = this.handurl(form.scenePhotos);
      arr.splice(arr.indexOf(url), 1);
      form.scenePhotos = arr.join(",");
    },
    // 验证表单
    validateForm() {
      console.log(this.form);
      let points = [];
      this.form.points &&
        this.form.points.length &&
        this.form.points.forEach(item => {
          points.push(item.left+","+item.top);
        });

      this.form.floorPlanTag = JSON.stringify(points);
      if (!this.form.orgId) {
        this.$A.MS(`请选择项目`);
        return false;
      }
      if (!this.form.areaId) {
        this.$A.MS(`请选择区域`);
        return false;
      }
      if (!this.form.problemDescription) {
        this.$A.MS(`请填写问题描述`);
        return false;
      }
      if (!this.form.problemPart) {
        this.$A.MS(`请填写问题部位`);
        return false;
      }
      if (!this.form.scenePhotos) {
        this.$A.MS(`请添加现场照片`);
        return false;
      }
      if (!this.form.responsibleUnitId) {
        this.$A.MS(`请选择责任单位`);
        return false;
      }
      if (!this.form.problemTypeId) {
        this.$A.MS(`请选择问题类型`);
        return false;
      }
      if (!this.problemDescription) {
        this.$A.MS(`请填写问题描述`);
        return false;
      }
      if (this.form.problemTypeId == "-1" && !this.form.problemElseRemark) {
        //this.$A.MS(`点位${index + 1}中未选择去区域`);
        this.$A.MS(`问题类型为其他但是未填写问题备注`);
        throw new Error();
      }
      if (!this.form.problemLevel) {
        this.$A.MS(`请选择问题等级`);
        return false;
      }
      if (!(this.form.points && this.form.points.length)) {
        this.$A.MS(`平面图未标记`);
        return false;
      }
      if (!this.form.days) {
        this.$A.MS(`请选择整改期限`);
        return false;
      }
      if (!this.form.rectificationRequirements) {
        this.$A.MS(`请输入整改要求`);
        return false;
      }
      if (!this.form.responsibleUserId) {
        this.$A.MS(`未选择整改责任人`);
        return false;
      }
      if (!this.form.reviewUser) {
        this.$A.MS(`未选择复查人`);
        return false;
      }
      return true;
    },
    save() {
      if (this.validateForm()) {
        //problemDescription
        let obj = Util.delParams(this.form, [
              "orgId",
              "areaId",
              "days",
              "floorPlanTag",
              "problemDescription",
              "problemLevel",
              "problemPart",
              "problemTypeId",
              "problemElseRemark",
              "rectCopyUserIds",
              "rectificationRequirements",
              "responsibleUnitId",
              "responsibleUserId",
              "reviewUser",
              "scenePhotos",
              "reportId",
              "isCurrentRect"
            ])
          obj.problemDescription = this.problemDescription;
        this.$A
          .Go(
            "post",
            this.api.addIssueReportOrderApi,
            obj
          )
          .then(response => {
            Util.processRes(response, () => {
              this.$A.MS(`提交成功`);
              this.$router.go(-2);
            });
            Util.processError(this, response);
          })
          .catch(err => {
            this.$closeLoading();
            console.log(err);
          });
      }
    }
  },
  destroyed() {}
};
</script>

<style lang="scss">
#IssueReportOrder {
  .imgTrigger {
    height: 0.75rem;
    width: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .userTrigger {
    height: 0.75rem;
    width: 0.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #0080cb;
    .add {
      border-radius: 0.25rem;
      width: 0.5rem;
      height: 0.5rem;
      border: 0.01rem solid rgba(0, 128, 203, 1);
    }
  }
  .userBox {
    margin-top: 4px;
    position: relative;
    height: 0.75rem;
    width: 0.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #0080cb;
    border-radius: 0.02rem;
    overflow: hidden;
    color: rgba(61, 61, 61, 1);
    .add {
      border-radius: 0.25rem;
      width: 0.5rem;
      height: 0.5rem;
      font-size: 0.26rem;
      color: #fff;
      background: rgba(0, 128, 203, 1);
      border: 0.01rem solid rgba(0, 128, 203, 1);
    }
  }
}
</style>
